<!DOCTYPE html>
<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport"
          content="width=device-width,height=device-height,maximum-scale=1.0,user-scalable=no">
    <style type="text/css">
        body {
            font-family: Arial, Helvetica, sans-serif;
        }

        #container {
            border: 5px solid grey;
            width: 800px;
            margin: 0 auto;
            padding: 10px;
        }

        #chatLog {
            padding: 5px;
            border: 1px solid black;
        }

        #chatLog p {
            margin: 0;
        }

        .event {
            color: #999;
        }

        .warning {
            font-weight: bold;
            color: #CCC;
        }
    </style>
    <title>摇一摇拔河</title>
</head>
<body>
<div id="wrapper">

    <div id="container">

        <h1>WebSockets Client</h1>

        <div id="chatLog">
        </div>
        <br/>

        <input id="text" type="text"/>
        <button id="disconnect">Disconnect</button>

    </div>

</div>
</body>
<script src="../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    $(function () {
                connect();
                function connect() {
                    var socket;
                    var host = "ws://192.168.1.105:7272";

                    try {
                        var socket = new WebSocket(host);
                        message('<p class="event">Socket Status: ' + socket.readyState);
                        socket.onopen = function () {
                            message('<p class="event">Socket Status: ' + socket.readyState + ' (open)');
                        }

                        socket.onmessage = function (msg) {
                            message('<p class="message">Received: ' + msg.data);
                        }

                        socket.onclose = function () {
                            message('<p class="event">Socket Status: ' + socket.readyState + ' (Closed)');
                        }

                    } catch (exception) {
                        message('<p>Error' + exception);
                    }

                    function send() {
                        var text = $('#text').val();
                        if (text == "") {
                            message('<p class="warning">Please enter a message');
                            return;
                        }
                        try {
                            socket.send(text);
                            message('<p class="event">Sent: ' + text)
                        } catch (exception) {
                            message('<p class="warning">');
                        }
                        $('#text').val("");
                    }


                    function message(msg) {
                        $('#chatLog').append(msg + '</p>');
                    }//End message()

                    //回车
                    $('#text').keypress(function (event) {
                        if (event.keyCode == '13') {
                            send();
                        }
                    });

                    $('#disconnect').click(function () {
                        socket.close();
                    });

                }

            }//End connect()
    );
</script>
</html>​